<template>
  <div class="page" style="height: 100vh; width: 100vw">
    <!-- <dv-full-screen-container class="page" style="padding-bottom: 10px"> -->
    <div class="title">
      <div style="margin-right: 10px">
        <img src="../assets/dashboard/left.png" />
      </div>
      <div class="title-name">融媒体仓储平台</div>
      <div style="margin-left: 10px">
        <img src="../assets/dashboard/right.png" />
      </div>
    </div>
    <!-- 温度时间绝对定位在右上角 -->
    <div class="mes">
      <div style="font-size: 20px; padding-left: 5px">
        {{ time }}
      </div>
      <div
        style="
          display: flex;
          justify-content: center;
          flex-direction: column;
          font-size: 10px;
          padding-left: 5px;
        "
      >
        <div>{{ week }}</div>
        <div>{{ date }}</div>
      </div>
      <div style="display: flex">
        <div style="padding-left: 5px">{{ temperature }}</div>
        <div style="padding-left: 5px">{{ weather }}</div>
        <div style="padding-left: 5px">
          <img
            style="width: 20px; height: 20px"
            :src="weatherImg[weatherIndex].url"
          />
        </div>
      </div>
      <div style="margin-left: 20px">
        <!-- <screenfull></screenfull> -->
      </div>
    </div>
    <!-- 进入工作台按钮，全屏按钮定位到左上方 -->
    <div class="left-mes">
      <div class="top-left" @click="toPage">
        <div class="workbench">进入工作台</div>
        <div style="display: flex; align-items: center; height: 100%">
          <img
            style="width: 20px; height: 20px"
            src="../assets/dashboard/entry.png"
          />
        </div>
      </div>
    </div>
    <div class="main">
      <div class="content-left">
        <dv-border-box-11
          title="低库预警"
          backgroundColor=" rgba(38, 99, 184, 0.4)"
          style="height: 45%; width: 100%"
          :color="['#40ACCB']"
        >
          <Warn></Warn>
        </dv-border-box-11>

        <dv-border-box-11
          title="分类情况统计"
          backgroundColor=" rgba(38, 99, 184, 0.4)"
          style="height: 45%; width: 100%"
          :color="['#40ACCB']"
        >
          <div class="content-box">
            <div style="width: 100%"><xqzPieCharts></xqzPieCharts></div>
          </div>
        </dv-border-box-11>
      </div>
      <div class="content-center">
        <dv-border-box-10 class="center-box">
          <dv-decoration-7
            style="width: 100%; height: 30px; color: #ffff50; font-size: 20px"
            >货位管理统计</dv-decoration-7
          >

          <div style="padding: 20px">
            <div>库存总量</div>
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <div class="flap-box">
                <div>1</div>
              </div>
              <div class="flap-box">
                <div>1</div>
              </div>
              <div class="flap-box">
                <div>1</div>
              </div>
              <div class="flap-box">
                <div>1</div>
              </div>
              <div class="flap-box">
                <div>1</div>
              </div>
              <div class="flap-box">
                <div>1</div>
              </div>
              <div class="flap-box">
                <div>个</div>
              </div>
            </div>
            <div style="padding-top: 20px; height: 400px">
              <div
                style="padding-left: 20px; padding-right: 20px"
                class="content-box"
              >
                <BigTable></BigTable>
              </div>
            </div>
            <div></div>
          </div>
        </dv-border-box-10>
      </div>
      <div class="content-left">
        <dv-border-box-11
          title="今日使用情况"
          backgroundColor=" rgba(38, 99, 184, 0.4)"
          style="height: 45%; width: 100%; padding: 40px"
          :color="['#40ACCB']"
        >
          <Today></Today>
          <!-- <xqzMap></xqzMap> -->
        </dv-border-box-11>
        <dv-border-box-11
          title="库存总量统计"
          backgroundColor=" rgba(38, 99, 184, 0.4)"
          style="height: 45%; width: 100%; padding: 40px"
          :color="['#40ACCB']"
        >
          <div style="display: flex; margin-top: 10px">
            <dv-border-box-8 style="padding: 10px 0px 10px 10px">
              <div style="display: flex">
                <div>
                  <dv-decoration-9 style="height: 60px; width: 60px">
                    <i style="color: #049cd7" class="el-icon-s-home"></i>
                  </dv-decoration-9>
                </div>

                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                  "
                >
                  <div style="font-size:25px;margin-left:10px">库存总量</div>
                  <div style="font-size: 22px; color: #f0f46a;margin-left:10px">222件</div>
                </div>
              </div>
            </dv-border-box-8>

            <dv-border-box-8 style="padding: 10px 0px 10px 10px">
              <div style="display: flex">
                <div>
                  <dv-decoration-9 style="height: 60px; width: 60px">
                    <i style="color: #049cd7" class="el-icon-house"></i>
                  </dv-decoration-9>
                </div>

                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                  "
                >
                  <div style="font-size:25px;margin-left:10px">已用数量</div>
                  <div style="font-size: 22px; color: #f0f46a;margin-left:10px">20件</div>
                </div>
              </div>
            </dv-border-box-8>
          </div>
          <dv-decoration-7
            style="
              width: 120px;
              height: 20px;
              color: #f0f46a;
              margin-bottom: 5px;
              margin-top: 5px;
            "
            >库存排名</dv-decoration-7
          >
          <dv-scroll-ranking-board
            style="height: 200px"
            :config="rankingConfig"
          />
        </dv-border-box-11>
      </div>
    </div>
    <!-- <div class="main">
        <div class="main-left">
          <div class="left-head">
            <div class="left-title">
              <div
                style="display: flex; align-items: center; margin-right: 5px"
              >
                <img
                  style="height: 20px; width: 20px"
                  src="../assets/dashboard/icon/small-title-icon.png"
                />
              </div>
              <div>新媒体风采</div>
            </div>
            <div
              style="padding-left: 20px; padding-right: 20px; padding-top: 20px"
            >
              <video
                controls="controls"
                type="video/mp4"
                style="width: 100%; height: 300px"
                src="../assets/video/propaganda.mp4"
              ></video>
            </div>
          </div>
          <div id="pie-box" class="left-center">
            <div class="left-title">分类情况统计</div>
            <xqzPieCharts></xqzPieCharts>
          </div>
        </div>
        <div class="main-content">
          <div class="left-title">今日使用情况</div>
          <div class="data-content">
            <div class="data-item">608户</div>
            <div class="data-item">608户</div>
            <div class="data-item">608户</div>
            <div class="data-item">608户</div>
            <div class="data-item">608户</div>
            <div class="data-item">608户</div>
          </div>
   
          <xqzMap></xqzMap>
        </div>
        <div class="main-left">
          <div class="left-head">
            <div class="left-title">使用记录情况</div>
            <xqzStructure></xqzStructure>
          </div>

          <div class="left-foot">
            <div class="left-title">库存总量统计</div>

            <div
              style="
                width: 100%;
                display: flex;
                justify-content: space-between;
                padding-left: 10px;
                padding-right: 10px;
              "
            >
              <div class="module-title" style="width: 40%">
                <div
                  class="ware-img"
                  style="
                    width: 60px;
                    height: 60px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  <img
                    style="width: 50px; height: 50px"
                    src="../assets/dashboard/icon/stock.png"
                  />
                </div>
                <div>
                  <div>库存存量</div>
                  <div style="color: #ebe330; font-size: 40px">111</div>
                </div>
              </div>
              <div class="module-title" style="width: 40%">
                <div class="ware-img">
                  <img
                    style="width: 50px; height: 50px"
                    src="../assets/dashboard/icon/warehouse.png"
                  />
                </div>
                <div>
                  <div>库存总量</div>
                  <div style="color: #ebe330; font-size: 40px">111</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div> -->
    <!-- </dv-full-screen-container> -->
  </div>
</template>
<script>
import { getWeather } from "../api/dashboard/index";
import screenfull from "../components/Screenfull/index.vue";
import xqzStructure from "./dashboard/xqzStructure.vue";
import xqzMap from "./dashboard/xqzMap.vue";
import xqzPieCharts from "./dashboard/xqzPieCharts.vue";
import xqzGenderChart from "./dashboard/xqzGenderChart.vue";
import xqzWordCloud from "./dashboard/xqzWordCloud.vue";
import Today from "./dashboard/Today.vue";
import Warn from "./dashboard/Warn.vue";
import BigTable from "./dashboard/BigTable.vue";
// 天气图标
import sunny from "@/assets/dashboard/icon/sunny.png";
import cloud from "@/assets/dashboard/icon/cloud.png";
export default {
  components: {
    xqzMap,
    xqzPieCharts,
    xqzGenderChart,
    xqzStructure,
    xqzWordCloud,
    screenfull,
    Warn,
    BigTable,
    Today,
  },
  data() {
    return {
      // 基础信息年月日时分秒
      date: null,
      time: null,
      week: null,
      // 获取温度天气
      temperature: null,
      weather: null,
      weatherIndex: 0,
      tableData: [
        {
          name: "2016-05-02",
          kind: "王小虎",
          num: "上海市普陀区金沙江路 1518 弄",
        },
        {
          name: "2016-05-02",
          kind: "王小虎",
          num: "上海市普陀区金沙江路 1518 弄",
        },
        {
          name: "2016-05-02",
          kind: "王小虎",
          num: "上海市普陀区金沙江路 1518 弄",
        },
        {
          name: "2016-05-02",
          kind: "王小虎",
          num: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      search: "",
      boardConfig: {
        oddRowBGC: "#0D1C43",
        evenRowBGC: "#002A6D",
        waitTime: 200000000000000,
        header: ["种类", "数量", "比例"],
        data: [
          [
            '<span style="color:#37a2da;">摄像头类</span>',
            "佳能",
            '<span style="color:red;">66%</span>',
          ],
          [
            '<span style="color:#37a2da;">摄像头类</span>',
            "佳能",
            '<span style="color:red;">66%</span>',
          ],
          [
            '<span style="color:#37a2da;">摄像头类</span>',
            "佳能",
            '<span style="color:red;">66%</span>',
          ],
          [
            '<span style="color:#37a2da;">摄像头类</span>',
            "佳能",
            '<span style="color:red;">66%</span>',
          ],
          [
            '<span style="color:#37a2da;">摄像头类</span>',
            "佳能",
            '<span style="color:red;">66%</span>',
          ],
          [
            '<span style="color:#37a2da;">摄像头类</span>',
            "佳能",
            '<span style="color:red;">66%</span>',
          ],
        ],
        index: true,
        columnWidth: [50],
        align: ["center"],
      },
      pondConfig: {
        value: 40,
        colors: ["red", "red"],
      },
      rankingConfig: {
        row: 2,
        data: [
          {
            name: "索尼FDR-AX700",
            value: 55,
            color:this.getcolor(55)
          },
          {
            name: "索尼Alpha系列",
            value: 120,
            color:this.getcolor(120)
          },
          {
            name: "松下LUMIX GH系列",
            value: 78,
            color:this.getcolor(78)
          },
          {
            name: "佳能EOS C系列",
            value: 66,
            color:this.getcolor(66)
          },
          {
            name: "佳能G系列家用摄像机",
            value: 80,
            color:this.getcolor(80)
          },
          {
            name: "节能牌自拍杆 ",
            value: 45,
            color:this.getcolor(45)
          },
          {
            name: "川渝",
            value: 29,
            color:this.getcolor(29)
          },
        ],
      },
      config: {
        number: [100],
        content: "{nt}个",
        rowGap: 2,
      },
      config: {
        number: [100], //初始数据
        content: "{nt}",
        style: {
          //这里可以修改默认样式
          fontSize: 30, //字体大小
          fill: "#FFFFFF", //字体颜色
          stroke: "#FFFFFF",
          opacity: 0.7,
          shadowColor: "blue",
          lineJoin: "round",
        },
      },

      weatherImg: [
        { name: "晴", url: sunny },
        { name: "多云", url: cloud },
      ],
    };
  },
  mounted() {
    this.showTime();
    this.showWeather();
    document.documentElement.requestFullscreen;
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
      return "";
    },
    // 获取时间
    getTime() {
      // 年月日并格式化
      let date = new Date();
      this.date = `${date.getFullYear()}-${
        date.getMonth() + 1 < 10
          ? `0${date.getMonth() + 1}`
          : date.getMonth() + 1
      }-${date.getDate() < 10 ? `0${date.getDate()}` : date.getDate()}`;
      this.time = `${
        date.getHours() < 10 ? `0${date.getHours()}` : date.getHours()
      }:${date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes()}
        `;
      // 获取周几
      let weekArray = [
        "星期天",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      this.week = weekArray[date.getDay()];
    },
    getWeather() {
      getWeather().then((res) => {
        this.temperature = res.data.data.real.weather.temperature + "℃";
        this.weather = res.data.data.real.weather.info;
        // 获取天气图片
        this.weatherImg.map((item, index) => {
          item.name == this.weather;
          this.weatherIndex = index;
        });
        // console.log("res", res.data.data.real.weather);
      });
    },
    // 递归展示时间每秒更新一次
    showTime() {
      this.getTime();
      // this.getWeather();
      setTimeout(() => {
        this.showTime();
      }, 1000);
    },
    // 递归展示温度和天气1h更新一次
    showWeather() {
      this.getWeather();
      setTimeout(() => {
        this.showWeather();
      }, 3600000);
    },
    // 调转去工作台，默认调转为除开首页第一个界面
    toPage() {
      this.$router.push(
        this.$store.state.permission.addRoutes[0].children
          ? this.$store.state.permission.addRoutes[0].path +
              "/" +
              this.$store.state.permission.addRoutes[0].children[0].path
          : this.$store.state.permission.addRoutes[0].path
      );
    },
    //得到颜色
    getcolor(value){
      if (value > 70) {
      return "green";  // 绿色
    } else if (value >= 30 && value <= 70) {
      return "yellow"; // 黄色
    } else {
      return "red";    // 红色
    }
    },

  }
};
</script>
<style scoped>
.el-table /deep/.warning-row {
  background-color: #0a2e7a;
  color: white;
}

.el-table /deep/ .success-row {
  color: white;
  background-color: #0b5cc7;
}
.flap-box {
  color: white;
  font-size: 40px;
  color: #f4f162;
  margin-right: 10px;
  box-shadow: #00ffff 0px 5px 10px;
  width: 50px;
  height: 50px;
  background-color: #2b48a3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ware-img {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("../assets/dashboard/box-img.png");
}
.module-title {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  font-size: 20px;
  display: flex;
  background-image: url("../assets/dashboard/module_title.png");
  color: white;
  text-align: center;
}

.workbench {
  font-size: 20px;
  margin-right: 5px;
}
.title-name {
  background-image: url("../assets/dashboard/icon/title.svg") no-repeat center
    center;
  background-size: 100%;
  /* width: 100vw;
  height: 100vh; */
  background-attachment: fixed;
}
.main {
  /* height: 90%; */
  height: 90%;
  flex-grow: 1;
  display: flex;
  align-items: space-between;
}
.page {
  display: flex;
  flex-direction: column;
  background-image: url("../assets/dashboard/bg.png");
  /* height-nav-scroll+5 */
  /* min-height: calc(100vh - 85px); */
  /* 20px为margin */

  color: white;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9999;
}
.title {
  text-align: center;
  /* color: black; */
  color: white;
  font-size: 30px;
  padding-top: 10px;
  display: flex;
  justify-content: center;
}
.content-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.main-left {
  width: 30%;
  margin-left: 10px;
  margin-right: 10px;
}
.left-title {
  padding-top: 10px;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  text-align: left;
  padding-left: 20px;
  /* color: black; */
  /* color: #4ab0db; */
  font-size: 20px;
}

.left-head {
  height: 100%;
  /*  */
  /* background-image: url("../assets/dashboard/box-img.png"); */
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.left-center {
  margin-top: 10px;
  height: calc(50% - 20px);
  width: calc(10vw-20px);
  margin-bottom: 10px;
  background-color: rgba(38, 99, 184, 0.4);
  background-image: url("../assets/dashboard/box-img.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.left-foot {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  height: calc(50% - 35px);
  background-color: rgba(38, 99, 184, 0.4);
  background-image: url("../assets/dashboard/box-img.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.base-data {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
}
.base-item {
  color: black;
  text-align: center;

  width: 33%;
  height: 50%;
}
.data-mix {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.data-num {
  font-size: 20px;
}

.data-unit {
  font-size: 10px;
}

.data-content {
  display: flex;
  flex-wrap: wrap;
  height: 20%;
  width: 100%;
}
.data-item {
  /* border-width: 5px 10px; */
  margin-left: 10px;
  border-bottom: 2px solid #346447;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30%;
  height: 20%;
}
.main-content {
  height: calc(100% - 12px);
  background-color: rgba(38, 99, 184, 0.4);
  background-image: url("../assets/dashboard/content-bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* margin-bottom: 10px; */

  width: 40%;
}

.left-mes {
  position: absolute;
  top: 10px;
  left: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mes {
  width: 20%;
  position: absolute;
  top: 10px;
  right: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-right {
  width: 30%;
}
.top-left {
  background-image: url("../assets/dashboard/title.png");
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.content-left {
  padding-top: 10px;
  padding-bottom: 10px;
  width: 30%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* max-height: 100vh; */
}
.content-center {
  /* padding-bottom: 10px; */
  width: 40%;
  height: 100%;
}
.content-right {
  width: 30%;
  height: 100%;
}
.center-box {
  margin-top: 10px;
  margin-bottom: 10px;
  height: calc(100% - 20px);
  width: 100%;
  margin-top: 10px;
}
</style>
